import NotAccessPage from '@/components/NotAccessPage';
import MonitorArticle from '@/pages/monitorhc/article';
import MonitorDispose from '@/pages/monitorhc/dispose';
import MonitorVideo from '@/pages/monitorhc/video';
import { parse } from '@/utils/historyUtils';
import {
  FileSearchOutlined,
  FolderViewOutlined,
  FundProjectionScreenOutlined,
  SmileOutlined,
  VideoCameraAddOutlined,
} from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { Badge, Card, Layout, Menu, Result } from 'antd';
import { SelectInfo } from 'rc-menu/lib/interface';
import React, { useEffect, useState } from 'react';
import { useAccess } from 'umi';

export default (): React.ReactNode => {
  const access = useAccess();
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};
  const [tabActiveKey, setTabActiveKeyState] = useState<string>('article');

  useEffect(() => {
    const { activeKey } = parse(location.search) as { activeKey: string };
    if (activeKey) {
      setTabActiveKeyState(activeKey);
    }
  }, []);

  const renderBadge = (count: number, active = false) => {
    return (
      <Badge
        count={count}
        style={{
          marginBlockStart: -2,
          marginInlineStart: 4,
          color: active ? '#1890FF' : '#999',
          backgroundColor: active ? '#E6F7FF' : '#eee',
        }}
      />
    );
  };

  const menuList = () => {
    const manageItems = [
      {
        label: <span>图文审读{renderBadge(0, tabActiveKey === 'article')}</span>,
        key: 'article',
        icon: <FileSearchOutlined />,
      },
      {
        label: <span>短视频监测{renderBadge(0, tabActiveKey === 'video')}</span>,
        key: 'video',
        icon: <FolderViewOutlined />,
      },
      {
        label: <span>联动处置{renderBadge(0, tabActiveKey === 'dispose')}</span>,
        key: 'dispose',
        icon: <FundProjectionScreenOutlined />,
      },
    ];
    const normalItems = [
      {
        label: <span>图文审读{renderBadge(0, tabActiveKey === 'article')}</span>,
        key: 'article',
        icon: <FileSearchOutlined />,
      },
      {
        label: <span>短视频监测{renderBadge(0, tabActiveKey === 'video')}</span>,
        key: 'video',
        icon: <FolderViewOutlined />,
      },
      {
        label: <span>联动处置{renderBadge(0, tabActiveKey === 'dispose')}</span>,
        key: 'dispose',
        icon: <VideoCameraAddOutlined />,
      },
    ];

    if (access.传播跟踪监测合川x页面) {
      return access.传播跟踪监测合川x配置x管理员 ? manageItems : normalItems;
    } else {
      return [];
    }
  };

  return (
    <Layout
      hasSider
      style={{
        backgroundColor: '#F7F7F7',
        padding: '15px',
      }}
    >
      <Layout.Sider
        width={300}
        style={{
          backgroundColor: '#F7F7F7',
          overflow: 'auto',
          height: '100%',
          position: 'fixed',
          paddingBottom: 30,
        }}
      >
        <Card
          style={{
            height: '100%',
          }}
          bordered={false}
          styles={{
            body: {
              padding: '8px 15px 15px',
            },
          }}
        >
          <span
            style={{
              fontSize: 14,
              display: 'flex',
              justifyContent: 'center',
              padding: 5,
              fontWeight: 'bold',
            }}
          >
            传播跟踪监测
          </span>
          <Menu
            onSelect={(info: SelectInfo) => {
              const key = info.key;
              let menuName = '';
              if (key === 'article') {
                menuName = '图文审读';
              }
              if (key === 'video') {
                menuName = '短视频监测';
              }
              if (key === 'dispose') {
                menuName = '联动处置';
              }
              setTabActiveKeyState(info.key);
            }}
            style={{ width: '100%', height: '100%', borderInlineEnd: 'none' }}
            selectedKeys={[tabActiveKey]}
            mode="vertical"
            items={menuList()}
          />
        </Card>
      </Layout.Sider>
      <Layout.Content style={{ marginLeft: '315px' }}>
        <div
          style={{
            width: 'calc(100% - 315px)',
            height: '100%',
            position: 'fixed',
            paddingBottom: 30,
            paddingRight: 30,
          }}
        >
          <Card
            style={{
              height: '100%',
              overflow: 'auto',
            }}
            styles={{
              body: {
                padding: '8px',
              },
            }}
          >
            {access.传播跟踪监测合川x页面 ? (
              <>
                {tabActiveKey === 'article' ? (
                  <MonitorArticle />
                ) : tabActiveKey === 'video' ? (
                  <MonitorVideo />
                ) : tabActiveKey === 'dispose' ? (
                  // <PageContainerMonitorLive />
                  <MonitorDispose />
                ) : tabActiveKey === 'television' ? (
                  <Result
                    icon={<SmileOutlined />}
                    title="该功能正在开发中，敬请期待!"
                    // extra={<Button type="primary">Next</Button>}
                  />
                ) : tabActiveKey === 'broadcast' ? (
                  <Result
                    icon={<SmileOutlined />}
                    title="该功能正在开发中，敬请期待!"
                    // extra={<Button type="primary">Next</Button>}
                  />
                ) : tabActiveKey === 'advertisement' ? (
                  <Result
                    icon={<SmileOutlined />}
                    title="该功能正在开发中，敬请期待!"
                    // extra={<Button type="primary">Next</Button>}
                  />
                ) : tabActiveKey === 'briefing' ? (
                  // <PageAudioVisualBriefing />
                  <Result
                    icon={<SmileOutlined />}
                    title="该功能正在开发中，敬请期待!"
                    // extra={<Button type="primary">Next</Button>}
                  />
                ) : (
                  <></>
                )}
              </>
            ) : (
              <NotAccessPage />
            )}
          </Card>
        </div>
      </Layout.Content>
    </Layout>
  );
};
